/**
 * 只能选择日期的 日期组件
 */
<template>
  <!-- <el-form-item :label="config.label" :label-width="config.labelW" :rules="config.rules" :class="config.formItemClass" :prop="config.name" :style="config.formItemStyle"> -->
  <el-date-picker :size="config.size" v-model="form.data.date" :class="config.childClass" :placeholder="config.placeholder" :format="config.format" :value-format="config.valueformat" :style="config.childStyle" :picker-options="pickerOptions" :type="config.type || 'date'" class="form-ele-cls" />
  <!-- </el-form-item> -->
</template>
<script>
export default {
  name: 'FormDate',
  props: {
    config: {
      type: Object,
      required: false,
      default: () => {
        return {
          label: '日期选择',
          name: 'date',
          type: 'date',
          placeholder: '请填写日期选择',
          format: 'yyyy-MM-dd HH:mm',
          valueformat: 'yyyy-MM-dd HH:mm',
          rules: [
            { required: true, message: '请输入日期选择', trigger: 'blur' }
          ]
        }
      }
    },
    // 组件循环时需要的idx值
    idx: {
      type: [Number, String],
      default: 0
    },
    pickerOptions: {
      type: Object,
      required: false,
      default () {
        return {}
      }
    },
    data: {
      type: [String, Number],
      required: false,
      default: ''
    }
  },
  data () {
    return {
      format: 'YYYY-MM-DD HH:mm:ss', // 这个是moment的格式
      form: {
        data: {
          date: ''
        }
      }
    }
  },

  watch: {
    config: {
      handler (obj) {
        // debugger
        this.format = this.elFormatMonent(obj) // el-date 的格式 和 moment 的格式对齐
        // debugger
      },
      deep: true,
      immediate: true
    },
    data: {
      handler (value) {
        // debugger
        let dataStr = value
        if (value && value.toString().length > 0) {
          dataStr = value.toString()
          if (dataStr.indexOf('-') === -1 && dataStr.indexOf('/') === -1) {
            // dataStr = this.$common.format(Number(dataStr), this.format)
            dataStr = this.$common.format(dataStr, this.format)
          }
        }
        this.form.data.date = dataStr
      },
      deep: true,
      immediate: true
    },
    form: {
      handler (val) {
        this.$emit('updateForm', '' + this.config.name, this.form.data.date, this.idx, this.config)
      },
      deep: true
    }
  },
  methods: {
    // el-date 的格式 转化 moment 的格式
    elFormatMonent (obj) {
      const str = obj.format
      const YReg = /y+/i
      const MReg = /M+/g
      const DReg = /D+/i
      const hReg = /h+/i
      const mReg = /m+/g
      const sReg = /s+/i
      let dateFormat = ''
      YReg.test(str) && (dateFormat = obj.format.replace(YReg, 'YYYY'))
      MReg.test(str) && (dateFormat = dateFormat.replace(MReg, 'MM'))
      DReg.test(str) && (dateFormat = dateFormat.replace(DReg, 'DD'))
      hReg.test(str) && (dateFormat = dateFormat.replace(hReg, 'HH'))
      mReg.test(str) && (dateFormat = dateFormat.replace(mReg, 'mm'))
      sReg.test(str) && (dateFormat = dateFormat.replace(sReg, 'ss'))
      // console.log('6.', dateFormat)
      return dateFormat
    }
  }
}
</script>
